<template>
  <div>
    <div class="flex gap-2">
      <el-tag type="success" size='large' round >商品分组</el-tag>
    </div>
    <!-- 商品列表表格 -->
    <el-table :data="orders" style="width: 100%">
      <el-table-column prop="product_id" label="产品序号" width="80"></el-table-column>
      <el-table-column prop="order_count" label="购买该商品的订单总数" width="80"></el-table-column>
      <el-table-column prop="min_product_num" label="单次订单最小购买数量" width="120"></el-table-column>
      <el-table-column prop="max_product_num" label="单次订单最大购买数量" width="120"></el-table-column>
      <el-table-column label="单次订单最高消费金额(元)" width="120">
                <template #default="scope">
          {{ scope.row.max_total_money / 100 }} 元
        </template>
      </el-table-column>
      <el-table-column label="单次订单平均消费金额(元)" width="120">
        <template #default="scope">
          {{ scope.row.min_total_money / 100 }} 元
        </template>
      </el-table-column>
      <el-table-column prop="avg_product_num" label="平均购买数量" width="120"></el-table-column>
    </el-table>
    <el-button type="primary" @click="router.push('/order/control')" style="margin-top: 10px">返回</el-button>
  </div>
</template>

<script setup>
import {ElButton} from "element-plus";
import {onMounted, ref} from 'vue';
import {useTokenStore} from "@/store/tokenStore.js";
import {getOrderGroup} from "@/api/user.js";
import {useRouter} from "vue-router";
const router = useRouter();
const orders = ref([]);


onMounted(() => {
  if (useTokenStore().token!== '') {
    fetchOrders();
  }
});
// 获取订单列表
const fetchOrders = async () => {
  const groupBy =[];
  groupBy.push('product_id')
  orders.value= await getOrderGroup(groupBy);
  console.log(orders.value)
};
</script>
<style scoped>

</style>